<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js重置序列动画</title>
<meta content="" name="description">
<script type="text/javascript" src="/j-tool/jquery.js"></script>
<style>
*{margin:0;padding:0;}
#mbox{
	position:absolute;
}
ul{margin:0 auto;width: 1000px;position:relative;}

ul li{
	float:left;
	margin: 10px 0;
	padding:0 20px;
	list-style-type:none;
}
.divBtn{
	text-align:center;
	position:fixed;
	bottom:0;
	left:0;
	_position:absolute;
	_bottom:expression(eval(documentElement.scrollTop + this.clientHeight));
}
#btn{margin: auto 0}
</style>
<body>
	<div>
		<ul>
			<li id="id-7">
				<img src="/pic/images/1.jpg"/>
			</li>
			<li id="id-10">
				<img src="/pic/images/2.jpg"/>
			</li>
			<li id="id-5">
				<img src="/pic/images/3.jpg"/>
			</li>
			<li id="id-3">
				<img src="/pic/images/4.jpg"/>
			</li>
			<li id="id-8">
				<img src="/pic/images/5.jpg"/>
			</li>
			<li id="id-2">
				<img src="/pic/images/6.jpg"/>
			</li>
			<li id="id-6">
				<img src="/pic/images/7.jpg"/>
			</li>
			<li id="id-9">
				<img src="/pic/images/8.jpg"/>
			</li>
			<li id="id-4">
				<img src="/pic/images/9.jpg"/>
			</li>
			<li id="id-0">
				<img src="/pic/images/10.jpg"/>
			</li>
			<li id="id-1">
				<img src="/pic/images/11.jpg"/>
			</li>
		</ul>
	</div>
	<div class="divBtn"><button id='btn'>Click</button></div>
</body>
<script>
	$('#btn').click(function(){

		$('li').each(function(i){
			var id = this.id.replace(/id-/g,"");
			var x = parseInt(id)%6;
			var y = Math.floor(parseInt(id)/6);
			$(this).css({position:'absolute'}).animate(
				{left: 165*x + 'px',top: 120*y + 'px',opacity:0.1}, 			
				700,
				function(){
					$('#id-' + i).insertAfter('#id-'+(i-1));
					$(this).css({opacity:'',position:'',left:'',top:''});
				}
			);
		})
	})
	
	$('ul').css({
		height:120 * Math.ceil($('li').length/6)
	})

	$('.divBtn').css({
		width:$(window).width()		
	})
</script>
</html>